<template>
	<view class="SearchBox">
		<view :class="['sticky-header', { 'is-sticky': isSticky }]">
		 <u-search placeholder="搜索" v-model="keyword"></u-search>
		</view>
		
		<view class="Atype">
			<h3>按指定类型搜索</h3>
			
			<ul class="type">
				<li>
					<image src="../../../static/images/ke.png" mode=""></image>
					<text>客户</text>
				</li>
				<li>
					<image src="../../../static/images/xian.png" mode=""></image>
					<text>线索</text>
				</li>
				<li>
					<image src="../../../static/images/shang.png" mode=""></image>
					<text>商机</text>
				</li>
				<li>
					<image src="../../../static/images/ding.png" mode=""></image>
					<text>订单</text>
				</li>
				<li>
					<image src="../../../static/images/lian.png" mode=""></image>
					<text>联系人</text>
				</li>
				<li>
					<image src="../../../static/images/ren.png" mode=""></image>
					<text>任务</text>
				</li>
				<li>
					<image src="../../../static/images/ri.png" mode=""></image>
					<text>日程</text>
				</li>
				<li>
					<image src="../../../static/images/bao.png" mode=""></image>
					<text>报告</text>
				</li>
			</ul>
		</view>
		
	</view>
</template>

<script>
	import { ref, onMounted, onUnmounted } from "vue";
	
	export default {
	  setup() {
	    const isSticky = ref(false);
	    const headerHeight = ref(0);
		const keyword=ref('遥看瀑布挂前川')
	
	    const handleScroll = () => {
	      if (window.pageYOffset > headerHeight.value) {
	        isSticky.value = true;
	      } else {
	        isSticky.value = false;
	      }
	    };
	
	    onMounted(() => {
	      headerHeight.value =
	        document.querySelector(".sticky-header").offsetHeight;
	      window.addEventListener("scroll", handleScroll);
	    });
	
	    onUnmounted(() => {
	      window.removeEventListener("scroll", handleScroll);
	    });
	
	    return {
	      isSticky,
	    };
	  },
	};
</script>

<style>
	.type{
		display: flex;
		flex-wrap: wrap;
		margin-top: 40px;
	}
	.type>li>text{
		width: 100%;
		display: inline;
		color: #666666;
		font-size: 14px;
		text-align: center;
		height: 40px;
		line-height: 40px;
	}
	.type>li>image{
		width:50px;
		height:50px;
		margin:0 auto;
	}
	.type>li{
		display: flex;
		flex-direction: column;
		width: 25%;
		height: 100px;
		
	}
	.Atype{
		width: 80vw;
		margin: 0 auto;
		height: 300px;
		margin-top: 30px;
	}
	h3{
		text-align: center;
		color: #999999;
		font-size: 14px;
		
	}
	*{
		padding: 0;
		margin: 0;
		list-style-type: none;
	}
	.SearchBox{
		background-color:rgba(242, 242, 242, 0.5);
	}
.sticky-header {
  position: sticky;
  top: 0;
  z-index: 999;
  /* 非吸顶时的样式 */
  width: 100vw;
  height: 50px;
  background-color: white;
  line-height: 50px;
}

.is-sticky {
  /* 吸顶时的样式 */
  width: 100vw;
  height: 50px;
  background-color: aqua;
}
.SearchBox{
	width: 100vw;
	height: 1000px;
}
</style>
